Announcement

**NormanRouxel** · 15-Nov-2022, 03:30 PM

Try this:

Only have a single price, quantity and add to cart in the body of the product page as per mobile.

Put a container DIV with a class mobcart around it.

Code:

<div class="mobcart" data-anc="<actinic:variable name="EncodedProductAnchor"/>"
  SELLERDECK STUFF HERE
</div>

One the sidebar put an empty container DIV with an ID like side_<encodedproductanchor> where you want the code to display.

Code:

<div id="side_<actinic:variable name="EncodedProductAnchor">
</div>

On page load, detect whether you want normal display and if so use jQuery to move the contents of mob_<encodedproductanchor> to inside side_<encodedproductanchor>.

Here's a little stand-alone page that lets you demo this:

Code:

<html>
<head>
<script type="text/javascript" src="jquery-1.11.1.js"></script>

<script>
function moveit(){
	$( "div.mobcart" ).each(function(){
		var anc = $(this).attr( "data-anc" );
		$( "#side_" + anc ).append( $(this).contents() );
		});
	}
</script>
</head>
<body>
Mobile View:
<div class="mobcart" data-anc="EncodedProductAnchor">
	SELLERDECK STUFF HERE
</div>

<br>
Sidebar View:
<div id="side_EncodedProductAnchor">
</div>

<br>
<input type="button" value="Move it" onclick="moveit()"/>

</body>
</html>

**graphicz** · 15-Nov-2022, 04:09 PM

Thank you so much Norman, very pleased to see your reply.

I shall have a crack at that in the morning

Best wishes

**graphicz** · 16-Nov-2022, 09:09 AM

I am making progress: https://www.webeg.net/norman-responsive-mobcart.html

I do have a lag when going above and below 768px and 'SELLERDECK STUFF HERE' moving.

Here is the code so far:

Code:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
$(function moveit() {
if ($(window).width() > 768) {
$( "div.mobcart" ).each(function(){
var anc = $(this).attr( "data-anc" );
$( "#side_" + anc ).append( $(this).contents() );
});
}
});
</script>
</head>
<body>
Mobile View:
<div class="mobcart" data-anc="EncodedProductAnchor">
SELLERDECK STUFF HERE
</div>

<br>
Sidebar View:
<div id="side_EncodedProductAnchor">
</div>

<br>

<script>$(window).bind('resize', function(e)
{
if (window.RT) clearTimeout(window.RT);
window.RT = setTimeout(function()
{
this.location.reload(false); /* false to get page from cache */
}, 100);
});
</script>
</body>
</html>

Thank you.

**NormanRouxel** · 16-Nov-2022, 02:16 PM

Reloading the page may be a bit of overkill. Here's demo that uses CSS to show/hide the two areas. Then some jQuery detects what's visible and moves code id required.

Code:

<html>
<head>

<style>
      @media (max-width: 767px) {
        .hidden-mobile {
          display: none;
        }
      }
      @media (min-width: 768px) {
        .show-mobile {
          display: none;
        }
      }
</style>

<script type="text/javascript" src="jquery-1.11.1.js"></script>

<script>
function toggleit(){
	if ( $("#mob_cart").length && $("#side_cart").length )	// only run if both elements on page
		{
		if ( $( "#mob_cart:visible" ).length )		// mobile is visible
			{
			if ( $( "#mob_cart:empty" ).length )	// but is empty
				{
				$( "#mob_cart" ).append( $("#side_cart").contents() );	// replace with side cart stuff
				}
			}
		else
			{					// mobile not visible
			if ( ! $( "#mob_cart:empty" ).length )	// mobile has code
				{
				$( "#side_cart" ).append( $("#mob_cart").contents() );	// move code to side cart
				}
			}
		}
	}

$(document).ready(function(){ 	// on initial page load
	toggleit(); 
});

$( window ).resize(function() {	// on window resize
	toggleit();
});

</script>
</head>
<body>
<h2>Demo of moving code depending on CSS based visibility</h2>
Mobile View:
<div class="show-mobile" id="mob_cart">
	SELLERDECK STUFF HERE
</div>

<br>
Sidebar View:
<div class="hidden-mobile" id="side_cart">
</div>

</body>
</html>

**graphicz** · 16-Nov-2022, 02:48 PM

Pure genius.

Thank you so much Norman.

Best wishes

**NormanRouxel** · 17-Nov-2022, 01:12 AM

Here's a little improvement that uses a timeout to prevent the resize being called many times as the window changes size.

Code:

<html>
<head>

<style>
      @media (max-width: 767px) {
        .hidden-mobile {
          display: none;
        }
      }
      @media (min-width: 768px) {
        .show-mobile {
          display: none;
        }
      }
</style>

<script type="text/javascript" src="jquery-1.11.1.js"></script>

<script>
function toggleit(){
	if ( $("#mob_cart").length && $("#side_cart").length )	// only run if both elements on page
		{
		if ( $( "#mob_cart:visible" ).length )		// mobile is visible
			{
			if ( $( "#mob_cart:empty" ).length )	// but is empty
				{
				$( "#mob_cart" ).append( $("#side_cart").contents() );	// replace with side cart stuff
				}
			}
		else
			{					// mobile not visible
			if ( ! $( "#mob_cart:empty" ).length )	// mobile has code
				{
				$( "#side_cart" ).append( $("#mob_cart").contents() );	// move code to side cart
				}
			}
		}
}

$(document).ready(function(){ 	// on initial page load
	toggleit(); 
});

var resizetimeout;
$( window ).resize(function() {	// on window resize
	clearTimeout(resizetimeout);				// clear any pending timeouts
	resizetimeout = setTimeout(toggleit, 100);		// only test after 100ms has elapsed
});

</script>
</head>
<body>
<h2>Demo of moving code depending on CSS based visibility</h2>
Mobile View:
<div class="show-mobile" id="mob_cart">
	SELLERDECK STUFF HERE
</div>

<br>
Sidebar View:
<div class="hidden-mobile" id="side_cart">
</div>

</body>
</html>

**graphicz** · 17-Nov-2022, 08:43 AM

That's terrific Norman

Thank you so much

Announcement

Different quantity placement in mobile breaks dynamic pricing

Different quantity placement in mobile breaks dynamic pricing

Comment

Comment

Comment

Comment

Comment

Comment

Comment