Ecommerce Responsive Template Search & Links

[Reevesie]

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

[BenPleysier]

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

[Reevesie]

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

[BenPleysier]

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.

[Reevesie]

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

[osgood_ · Accepted solution]

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="text"  id="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.

[osgood_]

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.

[osgood_]

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.

[Nancy OShea]

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