는 작은 화면 opencart 방법론

Question

을에 opencart 방법론 제품 페이지에서 설명 탭 위에 카트에 추가 버튼을 이동하는 데 도움이 필요, 작은 화면에 제품 페이지 계층 구조는 다음과 같습니다

1. 헤더
2. 제품 이미지
3. 설명 및 검토 탭
4. 가격, 옵션, 장바구니 버튼
5. 바닥 글

에 추가

이것은 작은 화면에서만 발생합니다. opencart의 제품 페이지에있는 장바구니에 추가 버튼은 설명 탭 아래에 있습니다. 긴 설명이 있으면 판매에 영향을줍니다.

설명 탭 위 및 추가 이미지 아래에있는 장바구니에 추가 버튼을 이동하고 싶습니다.

이것은 내 웹 사이트 www.festivetaste.com과 입니다. 모든 것이 큰 화면에서 잘 작동합니다. 당신은 jQuery를 사용할 수

Answer 1

, 나는 기본 테마에서이 테스트. , col-sm-4, col-sm-8 그래서 당신이 내 코드를 편집해야합니다 :이 두 클래스를 변경 Opencart 제품 페이지에 column-right 또는 column left에 대한 모듈을 할당하면 것을

<script> 
    $(function(){ 
     // We create a function 
     function moveCart(){ 
      // If user screen is smaller than 768 pixel 
      if($(window).width() < 768){ 
       /* 
        select cart area including cart button, options, product title and ... 
        if you want to only move cart button use '#product' instead of '#content > .row > .col-sm-4' 
       */ 
       $('#content > .row > .col-sm-4').removeClass('col-sm-4').addClass('moved-div'); 
       // now move it 
       $('.moved-div').insertAfter('.thumbnails'); 
      } else { 
       /* 
        if user resized his/her screen width and now screen is wider than 767 pixel and we moved cart area before, move it to its original place. 
       */ 
       if($('.moved-div').length){ 
        $('.moved-div').insertAfter('#content > .row > .col-sm-8').addClass('col-sm-4').removeClass('moved-div'); 
       } 
      } 
     } 

     // run function 
     moveCart(); 

     $(window).resize(function(){ 
      // run function again if user resized screen 
      moveCart(); 
     }) 
    }); 
</script> 

참고 :

은 product.tpl<?php echo $footer; ?> 전에이 추가 또는 수동 수업을 추가 할 수 있습니다.