Highlighted

Ecommerce Responsive Template Search & Links

New Here ,
Feb 19, 2019

Copy link to clipboard

Copied

I need 2 simple ecommerce pages 12 items per page. So have used Dreamweaver Responsive eCommerce template.

Can anyone explain how the sidebar Menu is supposed to work? Are there any sample websites using this template I can view?

Search function how does that work?

Thanks

Reevesie  wrote

Sidebar Menu seems a bit superfluous on my website is there a way of making the 3 col products fit over full width?

Yes. Make a back up copy of your file and css first before attempting the changes.

1. Obviously delete the sidebar code from your page:

<section class="sidebar">

   <!-- This adds a sidebar with 1 searchbox,2 menusets, each with 4 links -->

   <input type="textid="search" value="search">

   <div id="menubar">

   <nav class="menu">

   <h2><!-- Title for menuset 1 --> 1/8 PAGE</h2>

   <hr>

   <ul>

   <!-- List of links under menuset 1 -->

   <li><a href="#A" title="1/8 Page 1 Ad 1 Magazine">1/8 PAGE 1 AD <br> 1 Magazine</a></li>

   <li><a href="#" title="Link">1 MAGAZINE 6 ADS</a></li>

   <li><a href="#" title="Link">2 MAGAZINES 6 ADS</a></li>

   <li class="notimp"><!-- notimp class is applied to remove this link from the tablet and phone views --><a href="#title="Link">Link 4</a></li>

   </ul>

   </nav>

   <nav class="menu">

   <h2>MENU ITEM 2 </h2>

   <!-- Title for menuset 2 -->

   <hr>

   <ul>

   <!--List of links under menuset 2 -->

   <li><a href="#" title="Link">Link 1</a></li>

   <li><a href="#" title="Link">Link 2</a></li>

   <li><a href="#B" title="Link">LINK B</a></li>

   <li class="notimp"><!-- notimp class is applied to remove this link from the tablet and phone views --><a href="#" title="Link">Link 4</a></li>

   </ul>

   </nav>

   </div>

   </section>

2. Find the below in your css file:

/* Product rows for catalog */

#content .mainContent .productRow {

overflow: auto;

color: rgba(146,146,146,1.00);

}

and change it to:

/* Each product Information in the catalog */

#content .mainContent .productRow {

display: flex;

flex-wrap: wrap;

justify-content: space-around;

}

3. Find the below in your your css file

/* Each product Information in the catalog */

/*.mainContent .productRow .productInfo {

    float: left;

    padding-left: 5%;

    padding-right: 5%;

    width: 22%;

}

*/

and change it to:

/* Each product Information in the catalog */

.mainContent .productRow .productInfo {

width: 22%;

}

4. Find the below in the brown colored @media screen and (max-width:480px) { } in your css file:

/* Each product in catalog view */

.mainContent .productRow .productInfo {

    width: 100%;

    display: block;

    padding-left: 0px;

    padding-right: 0px;

    position: relative;

    left: -2%;

}

and change it to:

.mainContent .productRow .productInfo {

width: 100%;

}

That's all - you should have a wider 3 column structure now.

Views

156

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Ecommerce Responsive Template Search & Links

New Here ,
Feb 19, 2019

Copy link to clipboard

Copied

I need 2 simple ecommerce pages 12 items per page. So have used Dreamweaver Responsive eCommerce template.

Can anyone explain how the sidebar Menu is supposed to work? Are there any sample websites using this template I can view?

Search function how does that work?

Thanks

Reevesie  wrote

Sidebar Menu seems a bit superfluous on my website is there a way of making the 3 col products fit over full width?

Yes. Make a back up copy of your file and css first before attempting the changes.

1. Obviously delete the sidebar code from your page:

<section class="sidebar">

   <!-- This adds a sidebar with 1 searchbox,2 menusets, each with 4 links -->

   <input type="textid="search" value="search">

   <div id="menubar">

   <nav class="menu">

   <h2><!-- Title for menuset 1 --> 1/8 PAGE</h2>

   <hr>

   <ul>

   <!-- List of links under menuset 1 -->

   <li><a href="#A" title="1/8 Page 1 Ad 1 Magazine">1/8 PAGE 1 AD <br> 1 Magazine</a></li>

   <li><a href="#" title="Link">1 MAGAZINE 6 ADS</a></li>

   <li><a href="#" title="Link">2 MAGAZINES 6 ADS</a></li>

   <li class="notimp"><!-- notimp class is applied to remove this link from the tablet and phone views --><a href="#title="Link">Link 4</a></li>

   </ul>

   </nav>

   <nav class="menu">

   <h2>MENU ITEM 2 </h2>

   <!-- Title for menuset 2 -->

   <hr>

   <ul>

   <!--List of links under menuset 2 -->

   <li><a href="#" title="Link">Link 1</a></li>

   <li><a href="#" title="Link">Link 2</a></li>

   <li><a href="#B" title="Link">LINK B</a></li>

   <li class="notimp"><!-- notimp class is applied to remove this link from the tablet and phone views --><a href="#" title="Link">Link 4</a></li>

   </ul>

   </nav>

   </div>

   </section>

2. Find the below in your css file:

/* Product rows for catalog */

#content .mainContent .productRow {

overflow: auto;

color: rgba(146,146,146,1.00);

}

and change it to:

/* Each product Information in the catalog */

#content .mainContent .productRow {

display: flex;

flex-wrap: wrap;

justify-content: space-around;

}

3. Find the below in your your css file

/* Each product Information in the catalog */

/*.mainContent .productRow .productInfo {

    float: left;

    padding-left: 5%;

    padding-right: 5%;

    width: 22%;

}

*/

and change it to:

/* Each product Information in the catalog */

.mainContent .productRow .productInfo {

width: 22%;

}

4. Find the below in the brown colored @media screen and (max-width:480px) { } in your css file:

/* Each product in catalog view */

.mainContent .productRow .productInfo {

    width: 100%;

    display: block;

    padding-left: 0px;

    padding-right: 0px;

    position: relative;

    left: -2%;

}

and change it to:

.mainContent .productRow .productInfo {

width: 100%;

}

That's all - you should have a wider 3 column structure now.

Views

157

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Feb 19, 2019 0
Adobe Community Professional ,
Feb 19, 2019

Copy link to clipboard

Copied

Have a look at this article Adding Search Functionality to Your Website or Google the subject.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 19, 2019 1
New Here ,
Feb 19, 2019

Copy link to clipboard

Copied

Thanks for the link as I don't have any CMS it doesn't look as if it's possible with Dreamweaver, am I right in thinking this?

Thanks Helen

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 19, 2019 0
Adobe Community Professional ,
Feb 19, 2019

Copy link to clipboard

Copied

It depends on what you want users to find when using search.

As far as the links are concerned, these are also what you want the user to go to.

To sum it up, Dreamweaver will only help you with the code, it will not code this for you.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 19, 2019 0
New Here ,
Feb 19, 2019

Copy link to clipboard

Copied

Sidebar Menu seems a bit superfluous on my website is there a way of making the 3 col products fit over full width?

eCommerce template By Adobe Dreamweaver CC

Thanks

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 19, 2019 0
LEGEND ,
Feb 19, 2019

Copy link to clipboard

Copied

Reevesie  wrote

Sidebar Menu seems a bit superfluous on my website is there a way of making the 3 col products fit over full width?

Yes. Make a back up copy of your file and css first before attempting the changes.

1. Obviously delete the sidebar code from your page:

<section class="sidebar">

   <!-- This adds a sidebar with 1 searchbox,2 menusets, each with 4 links -->

   <input type="textid="search" value="search">

   <div id="menubar">

   <nav class="menu">

   <h2><!-- Title for menuset 1 --> 1/8 PAGE</h2>

   <hr>

   <ul>

   <!-- List of links under menuset 1 -->

   <li><a href="#A" title="1/8 Page 1 Ad 1 Magazine">1/8 PAGE 1 AD <br> 1 Magazine</a></li>

   <li><a href="#" title="Link">1 MAGAZINE 6 ADS</a></li>

   <li><a href="#" title="Link">2 MAGAZINES 6 ADS</a></li>

   <li class="notimp"><!-- notimp class is applied to remove this link from the tablet and phone views --><a href="#title="Link">Link 4</a></li>

   </ul>

   </nav>

   <nav class="menu">

   <h2>MENU ITEM 2 </h2>

   <!-- Title for menuset 2 -->

   <hr>

   <ul>

   <!--List of links under menuset 2 -->

   <li><a href="#" title="Link">Link 1</a></li>

   <li><a href="#" title="Link">Link 2</a></li>

   <li><a href="#B" title="Link">LINK B</a></li>

   <li class="notimp"><!-- notimp class is applied to remove this link from the tablet and phone views --><a href="#" title="Link">Link 4</a></li>

   </ul>

   </nav>

   </div>

   </section>

2. Find the below in your css file:

/* Product rows for catalog */

#content .mainContent .productRow {

overflow: auto;

color: rgba(146,146,146,1.00);

}

and change it to:

/* Each product Information in the catalog */

#content .mainContent .productRow {

display: flex;

flex-wrap: wrap;

justify-content: space-around;

}

3. Find the below in your your css file

/* Each product Information in the catalog */

/*.mainContent .productRow .productInfo {

    float: left;

    padding-left: 5%;

    padding-right: 5%;

    width: 22%;

}

*/

and change it to:

/* Each product Information in the catalog */

.mainContent .productRow .productInfo {

width: 22%;

}

4. Find the below in the brown colored @media screen and (max-width:480px) { } in your css file:

/* Each product in catalog view */

.mainContent .productRow .productInfo {

    width: 100%;

    display: block;

    padding-left: 0px;

    padding-right: 0px;

    position: relative;

    left: -2%;

}

and change it to:

.mainContent .productRow .productInfo {

width: 100%;

}

That's all - you should have a wider 3 column structure now.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 19, 2019 0
LEGEND ,
Feb 19, 2019

Copy link to clipboard

Copied

Or you could cheat a bit and do it the easy way:

Find the below in your css file and add display: none; as shown

/* Sidebar */

#content .sidebar {

    font-family: 'Montserrat', sans-serif;

    color: rgba(146,146,146,1.00);

    float: left;

    width: 20%;

    padding-left: 3%;

    padding-right: 3%;

    text-align: center;

    background-color: rgba(246,246,246,1.00);

    padding-top: 36px;

    height: 784px;

    display: none;

}

Find the below in your css file and change 70% to 100%:

/* main content of the site */

#content .mainContent {

    float: left;

    width: 70%;

    text-align: center;

    padding-left: 4%;

}

That's all. However if you don't intend to use the sidebar then it should be removed permanently as my other solution describes, not just hidden.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 19, 2019 1
LEGEND ,
Feb 19, 2019

Copy link to clipboard

Copied

Reevesie  wrote

Thanks for the link as I don't have any CMS it doesn't look as if it's possible with Dreamweaver, am I right in thinking this?

Thanks Helen

Its NOT possible.

The search box in the template is just eye candy and does nothing unless you either write the search code yourself or find a program or extension that will write it for you and that isnt Dreamweaver by default.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 19, 2019 1
Adobe Community Professional ,
Feb 19, 2019

Copy link to clipboard

Copied

A while back, I wrote an article on making a functional search form with Google Web Search. 

Add Google to your Bootstrap Search Bar - https://alt-web.com/

However since then Google has changed their policies.  Google now wants everyone to use their custom search API which means you have to obtain a key.   

Custom Search  |  Google Developers

Another option I have used successfully is Freefind.  The free version has ads.  The paid version does not have ads.

Site Search Engine | Add search to your website today

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 19, 2019 1