Announcement

Collapse
No announcement yet.

Manually link home page slider to background image

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Manually link home page slider to background image

    Hi
    The template that I'm using is not working properly and when I try to link the first slide to a product it keeps refreshing the home page. Customer service couldn't help me so I was wondering is there any way to link the first slide to a product and respectively the second one to another by tweaking the code.
    Thanx in advance

  • #2
    Are you manually adding these to the home.html file? Or through the carousel module?

    Comment


    • #3
      Added everything through the carousel module but the template is not working properly and linking is not working, that is why I'm looking for way manually to add the link.

      Comment


      • #4
        You should see something like below in the home.html file. I think its missing the [link] variable like shown in red below. Add this and it should work.


        <ul class="slides">
        <!--START: carousel-->
        <li><a href="[link]"><img src="[image]" alt="" /></a></li>
        <!--END: carousel-->
        </ul>

        Comment


        • #5
          Thank you so much for your help but when I do that it links all slides to the same product link. I need to be able to link every slide to a different product. The problem is I don't see the slides listed separately in the code

          Comment


          • #6
            You wont see the code for each individual one. If you have the image & link set in the carousel module and it does not work, then you most likely have a code issue in the home.html. Perhaps you can share to code from the home file within the <ul class="slides"> section.

            Comment


            • #7
              Looks like 3dCart removed the autotools-core template. Wonder if there was too many issues with it.

              Comment


              • #8
                I also realized they removed the template after I brought the issue. It is working fine for me beside the slider issue. Here is the code actually:

                <section class="homepage-slider">
                <div class="container">
                <!--START: home_carousel-->
                <div id="homeCarousel" class="homeCarousel flexslider parallax-slider" data-animation="[hc_effect]" data-slideshowspeed="[hc_delay]">
                <ul class="slides">
                <!--START: carousel-->
                <li class="parallax-slide-li">
                <a href="" class="parallax-slide" data-parallax-slide="[link]">
                <div class="parallax-text">
                <img src="[image]" alt="" />
                </div>
                </a>
                </li>
                <!--END: carousel-->
                </ul>
                </div>
                <!--END: home_carousel-->
                </div>

                Comment


                • #9
                  You're missing the link variable from <a href="" class="parallax-slide" data-parallax-slide="[link]">

                  Should be: <a href="[link]" class="parallax-slide" data-parallax-slide="[link]">

                  Comment


                  • #10
                    Thank very much for your help but when I do that it links all slides to the same product link. I need to be able to link every slide to a different product. The problem is I don't see the slides listed separately in the code

                    Comment


                    • #11
                      the Longhand

                      You can easily add a stock general home template slider block. The parallax carousel block is the issue

                      find this tagged section as you have stated above:

                      <!--START: home_carousel-->
                      <div id="homeCarousel" class="homeCarousel flexslider parallax-slider" data-animation="[hc_effect]" data-slideshowspeed="[hc_delay]">
                      <ul class="slides">
                      <!--START: carousel-->
                      <li class="parallax-slide-li">
                      <a href="" class="parallax-slide" data-parallax-slide="[link]">
                      <div class="parallax-text">
                      <img src="[image]" alt="" />
                      </div>
                      </a>
                      </li>
                      <!--END: carousel-->
                      </ul>
                      </div>
                      <!--END: home_carousel-->

                      replace with this:

                      <!--START: home_carousel-->
                      <div class="homeCarousel flexslider" data-animation="[hc_effect]" data-slideshowspeed="[hc_delay]">
                      <ul class="slides">
                      <!--START: carousel-->
                      <li><a href="[link]"><img src="[image]" alt="" /></a></li>
                      <!--END: carousel-->
                      </ul>
                      </div>
                      <!--END: home_carousel-->

                      Then you will have to update your homecarousel script area at the bottom of the home.html. Here is the unmodified from the version that would fit your theme in general (remove all of your commented out "//" scripting)

                      <script type="text/javascript" src="/assets/templates/common-core/lib/flexslider/jquery.flexslider-min.js"></script>
                      <script type="text/javascript" charset="utf-8">
                      jQuery(function () {
                      jQuery('.homeCarousel').flexslider({
                      animation: jQuery('.homeCarousel').attr('data-animation'),
                      slideshow: true,
                      slideshowSpeed: jQuery('.homeCarousel').attr('data-slideshowspeed'),
                      controlNav: false,
                      keyboard: false
                      });
                      });
                      </script>


                      If you want to try a different unmodified home.html version all together, you can use this older stock version (I have 95% of all version templates backed up just in case):

                      HTML Code:
                      <section id="home" class="home-page-content page-content">
                      <section class="homepage-slider">
                      <div class="container">
                      <!--START: home_carousel-->
                      <div class="homeCarousel flexslider" data-animation="[hc_effect]" data-slideshowspeed="[hc_delay]">
                      <ul class="slides">
                      <!--START: carousel-->
                      <li><a href="[link]"><img src="[image]" alt="" /></a></li>
                      <!--END: carousel-->
                      </ul>
                      </div>
                      <!--END: home_carousel-->
                      </div>
                      </section>
                      
                      <!--START: CATEGORY_HEADER-->
                      <section class="category-header content-section">
                      <div class="container">
                      <div class="content tc-pagebuilder">[CONTENT]</div>
                      </div>
                      </section>
                      <!--END: CATEGORY_HEADER-->
                      
                      <!--START: FEATURE_MENU-->
                      <section class="products-section">
                      <div class="container">
                      
                      <h2 class="header-specials">[category_Header-specials]</h2>
                      
                      <!--START: CATEGORY_ITEMS-->
                      <div class="product-items product-items-[product-cols-number]">
                      <!--START: ITEM_TEMPLATE_0-->
                      [product_items]
                      <!--END: ITEM_TEMPLATE_0-->
                      </div>
                      <!--END: CATEGORY_ITEMS-->
                      
                      </div>
                      </section>
                      <!--END: FEATURE_MENU-->
                      
                      <!--START: CATEGORY_FOOTER-->
                      <section class="category-footer content-section">
                      <div class="container">
                      <div class="content tc-pagebuilder">[CONTENT]</div>
                      </div>
                      </section>
                      <!--END: CATEGORY_FOOTER-->
                      
                      </section>
                      
                      <!--START: template_scripts-->
                      <script type="text/javascript" src="/assets/templates/common-core/lib/flexslider/jquery.flexslider-min.js"></script>
                      <script type="text/javascript" charset="utf-8">
                      jQuery(function () {
                      jQuery('.homeCarousel').flexslider({
                      animation: jQuery('.homeCarousel').attr('data-animation'),
                      slideshow: true,
                      slideshowSpeed: jQuery('.homeCarousel').attr('data-slideshowspeed'),
                      controlNav: false,
                      keyboard: false
                      });
                      });
                      </script>
                      <!--END: template_scripts-->
                      
                      <!--START: template_styles-->
                      <link rel="stylesheet" href="/assets/templates/common-core/lib/flexslider/flexslider.css" type="text/css" media="screen" />
                      <link href="assets/templates/common-core/lib/contentbuilder/minimalist-blocks/content.css" rel="stylesheet" type="text/css" />
                      <!--END: template_styles-->

                      Any which way, after you save anything, clear your store cache, browser cache and refresh the page
                      TheCartDesigner.com
                      Not 3dcart Owned or Operated
                      100% Independent 3dcart Expert


                      Follow Us on Twitter

                      Comment


                      • #12
                        Wow, everything works now. Would like to buy you a beer :cool:

                        Comment


                        • #13
                          No worries, Happy to help
                          TheCartDesigner.com
                          Not 3dcart Owned or Operated
                          100% Independent 3dcart Expert


                          Follow Us on Twitter

                          Comment

                          Working...
                          X