Announcement

Collapse
No announcement yet.

Info pages instead of Related Products

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

    Info pages instead of Related Products

    I have a product that is going to be aimed at trade to finish, or crafters at home.

    The product is a ring blank that allows for memory items, ashes etc to be added as an inlay.
    The product for info is here https://www.titanjewellery.co.uk/Men...ring-TI55.html

    What I want to do be able to do is use the Related Products as an information bar instead. So I would have maybe 4 pictures of this ring like the Related Products would normally show, 1 maybe as a "how to do page" another as perhaps a gallery of completed rings that we have already done etc.

    The way I am currently thinking of doing this is add the content I need as just info pages on the website, but setup 4 dummy products that show in the Related Products pane, but have a 3xx redirect on them to the info page instead. A few blockif's to suppress price and buy now button and replace with perhaps more info instead.

    My question is, is this the most obvious clean way of doing this? This will only be for 1 product so don't really want to make major changes to the website that may cause issues elsewhere?

    Any other ideas on how to implement this?
    Regards

    Jason

    Titan Jewellery (Swift Design)
    Zirconium Rings
    Damascus Steel Rings

    #2
    That is probably the easiest way to do it.

    I was thinking you could create a layout by copying the related products code from another page and then editing that, but I've realised that would be fixed and wouldn't change for desktop / mobile views.
    -----------------------------------------

    First Tackle - Fly Fishing and Game Angling

    -----------------------------------------

    Comment


      #3
      How about the carrousel code, you can use four items and link off to the info pages (can be hidden from menu).
      If you use the right size images they all show I think instead of waiting for each to reappear
      https://www.harrisontelescopes.co.uk/

      Ed Harrison - Menmuir Scotland

      Comment


        #4
        Use slick Slider: https://kenwheeler.github.io/slick/

        All the sliders on this page https://www.graphicz.io/sd/index.html are Slick

        Scroll down to the Best Sellers/New Products and they are four across sliders

        Code:
        <script>
        $(function() {
        $(".nplresponsive .slick-track").css("width","100%");
        $(".nplresponsive .slick-slide").css("width","100%");
        $('.nplresponsive').slick({
        autoplay: true,
        autoplaySpeed: 4000,
        dots: true,
        infinite: true,
        speed: 1000,
        slidesToShow: 4,
        slidesToScroll: 2,
        responsive: [{
        breakpoint: 1200,
        settings: {
        slidesToShow: 4,
        slidesToScroll: 2,
        infinite: true,
        dots: true
        }
        }, {
        breakpoint: 992,
        settings: {
        slidesToShow: 3,
        slidesToScroll: 1
        }
        }, {
        breakpoint: 768,
        settings: {
        slidesToShow: 2,
        slidesToScroll: 1
        }
        }, {
        breakpoint: 576,
        settings: {
        slidesToShow: 1,
        slidesToScroll: 1
        }
        }]
        });
        
        
        var bsl = ['.nplresponsive'];
        bsl.forEach(function(value) {
        var column = 0;
        $(value).find('.card').each(function(){
        if($(this).height() > column){
        column = $(this).height();
        }
        });
        $(value).find('.card').attr('style','height:'+column+'px');
        });
        
        });
        
        </script>
        Jonathan Chappell
        Website Designer
        SellerDeck Website Designer
        Actinic to SellerDeck upgrades
        Graphicz Limited - www.graphicz.co.uk

        Comment


          #5
          Built in BX Slider allows multiple slides: https://bxslider.com/examples/carous...-number-slides

          Code:
          $('.bxslider').bxSlider({ minSlides: 2, maxSlides: 2, slideWidth: 360, slideMargin: 10 });
          Jonathan Chappell
          Website Designer
          SellerDeck Website Designer
          Actinic to SellerDeck upgrades
          Graphicz Limited - www.graphicz.co.uk

          Comment


            #6
            A chap called Rahisify did a custom version of BX slider that I use:
            Code:
             * Custom modifications of BX slider.
            * ---------------------------------------------------------------------------------------
            * - Author: Rahisify
            * - Url : http://rahisify.com
            * ---------------------------------------------------------------------------------------
            * (1) Added data attributes support
            * (2) Added break points support
            * (3) Added automatic reload option
            * (4) Added automatic slide width calculation
            * (4) Added self calling capability
            Unfortunately he has dropped off the internet - but the code is here: https://github.com/Rahisify/bxslider-4
            Attached Files
            Jonathan Chappell
            Website Designer
            SellerDeck Website Designer
            Actinic to SellerDeck upgrades
            Graphicz Limited - www.graphicz.co.uk

            Comment


              #7
              Edited example to use in SD - pics refer to images in previous zip

              Code:
              <!DOCTYPE html>
              <html lang="en-gb">
              <head>
              <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
              <title>Title of the document</title>
              <meta name="description" content="" />
              <meta name="keywords" content="" />
              <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
              <link href="jquery.bxslider.css" rel="stylesheet" type="text/css" />
              <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
              <script type="text/javascript" src="jquery.bxslider-rahisified.js"></script>
              </head>
              <body>
              <script>
              $(document).ready( function() {
              //$('[class$="bxSlider"]').bxSlider({
              $('[class^="bxSlider"]').bxSlider({
              slideMargin: 5,
              autoReload: true,
              minSlides :1,
              moveSlides : 1,
              maxSlides : 1,
              slideWidth : 900,
              auto : true,
              autoHover : true,
              pause : 2000,
              mode : 'horizontal',
              ///slideMargin : 5, for two or three slides
              //autoReload : true,
              breaks: [{screen:0, slides:1, pager:false},{screen:460, slides:2, pager:false},{screen:768, slides:3, pager:true}]
              });
              });
              </script>
              <div class="sidebar">
              <div class="bxSliderAB12">
              <div class="Slider"><a href="#"><img src="pic1.jpg"></a></div>
              <div class="Slider"><a href="#"><img src="pic2.jpg"></a></div>
              <div class="Slider"><a href="#"><img src="pic4.jpg"></a></div>
              <div class="Slider"><a href="#"><img src="pic3.jpg"></a></div>
              <div class="Slider"><a href="#"><img src="pic6.jpg"></a></div>
              <div class="Slider"><a href="#"><img src="pic5.jpg"></a></div>
              </div>
              </div>
              </body>
              </html>
              Jonathan Chappell
              Website Designer
              SellerDeck Website Designer
              Actinic to SellerDeck upgrades
              Graphicz Limited - www.graphicz.co.uk

              Comment


                #8
                Many thanks all.

                I think I may stick to the way I outlined in my post, however, Jonathan I do have an idea for somewhere else for what you have posted above. So many thanks for taking the time to do so.
                Regards

                Jason

                Titan Jewellery (Swift Design)
                Zirconium Rings
                Damascus Steel Rings

                Comment

                Working...
                X