How do I create such a dynamic structure?HTML + PHP [closed] - php

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have the following PHP code, which dynamically generates content:
<div id="carousel-example" class="carousel slide hidden-xs" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<?php foreach ($this->getItems() as $_item): ?>
<div class="col-sm-3">
<a class="product-image" href="<?php echo $_item->getProductUrl() ?>" title="<?php echo $this->escapeHtml($_item->getName()) ?>"><img src="<?php echo $this->helper('catalog/image')->init($_item, 'thumbnail')->resize(75); ?>" width="75" height="75" alt="<?php echo $this->escapeHtml($_item->getName()) ?>" /></a>
<div class="product-details">
<h3 class="product-name"><?php echo $this->escapeHtml($_item->getName()) ?></h3>
<?php echo $this->getPriceHtml($_item, true) ?>
<button type="button" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Add to Cart')) ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_item) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
<ul class="add-to-links">
<?php if ($this->helper('wishlist')->isAllow()) : ?>
<li><?php echo $this->__('Add to Wishlist') ?></li>
<?php endif; ?>
<?php if($_compareUrl=$this->getAddToCompareUrl($_item)): ?>
<li><span class="separator">|</span> <?php echo $this->__('Add to Compare') ?></li>
<?php endif; ?>
</ul>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
The above code outputs the following structure:
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-3">product1</div>
<div class="col-sm-3">product2</div>
<div class="col-sm-3">product3</div>
<div class="col-sm-3">product4</div>
<div class="col-sm-3">product5</div>
<div class="col-sm-3">product6</div>
.
.
.
etc..
</div>
</div>
</div>
I want to create this structure:
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-3">product1</div>
<div class="col-sm-3">product2</div>
<div class="col-sm-3">product3</div>
<div class="col-sm-3">product4</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-3">product1</div>
<div class="col-sm-3">product2</div>
<div class="col-sm-3">product3</div>
<div class="col-sm-3">product4</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-3">product1</div>
<div class="col-sm-3">product2</div>
<div class="col-sm-3">product3</div>
<div class="col-sm-3">product4</div>
</div>
</div>
.
.
.
etc...
</div>
How do I change the dynamic structure so they get what they want?
Thanks in advance!

In order to create the structure you want:
You need to put <div class="item active"> in the foreach loop as well, because in order to have many items, you want that to be repeated many times too.
You have to remove active from <div class="item active"> as it will be added to every item, while we only want it to be in the first one.
You have to create a checking variable, so that the class active is added to the first item only.
Your final code should look like:
<div id="carousel-example" class="carousel slide hidden-xs" data-ride="carousel">
<div class="carousel-inner">
<?php
$i = 0; /* This is the checking variable */
$active; /* This is the variable containing the class 'active' */
foreach ($this->getItems() as $_item):
$i++; /* We increment the checking variable in each loop */
$active = ($i === 1) ? "active" : ""; /* We make the check */
?>
<div class="item <?php echo $active;?>">
<!-- The rest of your code as it is -->
</div>
<?php
endforeach;
?>
</div>
</div>
[EDIT]:
Considering your comment, in the case of wanting four products in each item, you would need to use another loop inside <div class = "row">.
The key part you are doing wrong in your code, however, that doesn't change, is that you don't loop the <div class = "item"> and that's way you have only one.
A preview of how your code inside <div class="item"> should be:
<div class="item <?php echo $active;?>">
<div class="row">
<?php
for ($i = 0; $i <= 4; ++$i):
?>
<div class="col-sm-3"><!-- The rest of the code --></div>
<?php
endfor;
?>
</div>
</div>

Try this:
<div id="carousel-example" class="carousel slide hidden-xs" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<?php foreach ($this->getItems() as $key=>$_item): // add $key in for loop
if($key != 0 && $key % 4 == 0) { // just add this code - it will check if 4 records has been displayed re create row div...
echo '</div><div class="row">';
}
?>
<div class="col-sm-3">
<a class="product-image" href="<?php echo $_item->getProductUrl() ?>" title="<?php echo $this->escapeHtml($_item->getName()) ?>"><img src="<?php echo $this->helper('catalog/image')->init($_item, 'thumbnail')->resize(75); ?>" width="75" height="75" alt="<?php echo $this->escapeHtml($_item->getName()) ?>" /></a>
<div class="product-details">
<h3 class="product-name"><?php echo $this->escapeHtml($_item->getName()) ?></h3>
<?php echo $this->getPriceHtml($_item, true) ?>
<button type="button" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Add to Cart')) ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_item) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
<ul class="add-to-links">
<?php if ($this->helper('wishlist')->isAllow()) : ?>
<li><?php echo $this->__('Add to Wishlist') ?></li>
<?php endif; ?>
<?php if($_compareUrl=$this->getAddToCompareUrl($_item)): ?>
<li><span class="separator">|</span> <?php echo $this->__('Add to Compare') ?></li>
<?php endif; ?>
</ul>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
</div>

Related

How to access a custom attribute I've created in Magento? (in PHP)

I'd like to include an IF statement into my highlights.phtml file where I can check if my custom attribute (named preorder) has been selected or not. As the name indicates, this custom attribute can be set on a product to signify if it can be pre-ordered. How can I access this variable/attribute in the highlights slider code, below? It doesn't seem to be part of the $products array?
<?php $products = $this->getHighlightedProducts() ?>
<?php if (is_array($products) && count($products)): ?>
<div class="block block-related">
<div class="block-title">
<h2><?php echo $this->__('Highlighted Products') ?></h2>
</div>
<div class="block-content">
<div class="product-carousel">
<div class="product-carousel">
<ul class="highlighted-products-slider slider">
<?php $limit = 6; ?>
<?php foreach ($products as $product): ?>
<li class="item">
<div class="product" >
<a class="product-image" href="<?php echo $this->escapeHtml($product['url']) ?>">
<img src="<?php echo $this->escapeHtml($product['image']) ?>">
</a>
<div class="product-details">
<p class="product-name">
<?php echo $this->escapeHtml($product['name']) ?>
</p>
<?php echo $product['price'] ?>
</div>
<div class="actions">
<a href="<?php echo $this->escapeHtml($product['add_to_cart_url']) ?>">
<button class="button btn-cart"><?php echo $this->__('Add to Cart') ?></button>
</a>
</div>
</div>
</li>
<?php
if(++$ct >= $limit)
break;
?>
<?php endforeach ?>
<?php endif ?>
</ul>
</div>
</div>
</div>
</div>
Get the attribute with the code i added, then use it for your logic. What you want to do with the attribute, you can do now. But $product['id'] has to exist!
You need the product id for this to work, else maybe the SKU.
Hope to help.
<?php $products = $this->getHighlightedProducts() ?>
<?php if (is_array($products) && count($products)): ?>
<div class="block block-related">
<div class="block-title">
<h2><?php echo $this->__('Highlighted Products') ?></h2>
</div>
<div class="block-content">
<div class="product-carousel">
<div class="product-carousel">
<ul class="highlighted-products-slider slider">
<?php $limit = 6; ?>
<?php foreach ($products as $product): ?>
<?php
$productToCheck= Mage::getModel('catalog/product')->load($product['id']);
//use this variable
$variable = $productToCheck->getData('preorder');
//use this variable when attribute is a dropdown
$variableIfItsADropdown = $product->getAttributeText('preorder');
?>
<li class="item">
<div class="product" >
<a class="product-image" href="<?php echo $this->escapeHtml($product['url']) ?>">
<img src="<?php echo $this->escapeHtml($product['image']) ?>">
</a>
<div class="product-details">
<p class="product-name">
<?php echo $this->escapeHtml($product['name']) ?>
</p>
<?php echo $product['price'] ?>
</div>
<div class="actions">
<a href="<?php echo $this->escapeHtml($product['add_to_cart_url']) ?>">
<button class="button btn-cart"><?php echo $this->__('Add to Cart') ?></button>
</a>
</div>
</div>
</li>
<?php
if(++$ct >= $limit)
break;
?>
<?php endforeach ?>
<?php endif ?>
</ul>
</div>
</div>
</div>
</div>

Bootstrap accordion in WP ACF loop only opening/closing first panel

As title implies this code shows all the questions that i add to the loop/accordion but no matter which one i click on it only opens and closes the first and i cant tell why.
<div class="container">
<div class="row">
<div id="accordion" role="tablist" aria-multiselectable="false" class="py-4">
<?php
$counter = 0;
$loop = get_field('questions');
foreach($loop as $row) : ?>
<div class="card card-no-border card-no-shadow">
<div class="card-header" role="tab" id="heading<?php echo $counter++ ?>">
<h5 class="mb-0">
<a class="body2 uppercase bold" data-toggle="collapse" data-parent="#accordion"
href="#collapse<?php the_ID(); ?>"
aria-expanded="<?php echo $first; ?>" aria-controls="collapse<?php the_ID(); ?>">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
<span style='padding-right: 20px;'></span>
<?php echo $row['question_title']?>
</a>
</h5>
</div>
<div id="collapse<?php the_ID(); ?>" class="collapse<?php if ($first) {
echo "show";
} ?>" role="tabpanel"
aria-labelledby="heading<?php the_ID(); ?>">
<div class="card-block body2">
<?php echo $row['answer'] ?>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
I would say you need to look at your id's
href="#collapse<?php the_ID(); ?>"
id="collapse<?php the_ID(); ?>"
the_id function is outputting the current page id not the id of each loop/question
You could use your counter instead
id="collapse<?php echo $counter; ?>"

Alternate layout for every loop

In every loop I want to alternate the layout of my blocks, so it would be like this:
Loop 1: Left column image, right column text
Loop 2: Left column text, right column image
But so far all i'm managing so far is each block is on the same side or the first block is duplicated, here is my code so far:
Any help or a point in the right direction would be greatly appreciated
<?php $i = 0;
foreach ($homepageblocks as $block):
$i++; ?>
<div class="row">
<div class="container container-fluid">
<div class="col-md-6">
<h2><?php echo $block['title']; ?></h2>
<?php echo $block['content']; ?>
Read More
</div>
<div class="col-md-6 nopadding">
<img src="<?php echo '/uploads'.$img_path; ?>" alt="<?php echo $block['title']; ?>"/>
</div>
</div>
</div>
<?php if($i%2 == 0): ?>
<div class="row">
<div class="container container-fluid">
<div class="col-md-6 nopadding">
<img src="<?php echo '/uploads'.$img_path; ?>" alt="<?php echo $block['title']; ?>" />
</div>
<div class="col-md-6">
<h2><?php echo $block['title']; ?></h2>
<?php echo $block['content']; ?>
Read More
</div>
</div>
</div>
<?php endif; ?>
<?php endforeach; ?>
Add else branch to your if:
foreach ($homepageblocks as $block):
$i++;?>
<div class="row">
<div class="container container-fluid">
<?php
// one layout type
if($i%2 == 0):?>
<div class="col-md-6 nopadding">
<img src="<?php echo '/uploads'.$img_path; ?>" alt="<?php echo $block['title']; ?>" />
</div>
<div class="col-md-6">
<h2><?php echo $block['title']; ?></h2>
<?php echo $block['content']; ?>
Read More
</div>
<?php
// another layout type
else:?>
<div class="col-md-6">
<h2><?php echo $block['title']; ?></h2>
<?php echo $block['content']; ?>
Read More
</div>
<div class="col-md-6 nopadding">
<img src="<?php echo '/uploads'.$img_path; ?>" alt="<?php echo $block['title']; ?>"/>
</div>
<?php
endif;?>
</div>
</div>
<?php
endforeach; ?>

Bootstrap Carousel in Foreach Loop

I have Carousel with 4 images like given in the following image.
My Effort is given in following.
<div id="thumbCarousel" class="carousel slide">
<div class="carousel-inner">
<?php $i=0; foreach($this->partner_images as $sr){?>
<?php if($i==0){ ?><div class="item active"><?php } ?>
<?php if($i ==4){ ?><div class="item"><?php }?>
<div class="col-xs-3">
<a href="<?php echo $sr['url']; ?>">
<img src="<?php echo BASE_URL?>/partner-images/<?php echo $sr['name']?>" />
</a>
</div>
<?php if($i==3 or $i==7){ ?></div><?php }?>
<?php $i++; } ?>
</div>
<a class="thumbleft" href="#thumbCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="thumbright" href="#thumbCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span> </a>
</div>
</div>
Problem:
The problem is that it is working fine for 4 images and for 8 images, so when there are 4 or more picture are not showing properly. I want to do it automatically either images are even or odd.
Question:
My question is how i can show 4 or more images like shown in the images automatically ?
I try this and it is working fine.
<div id="thumbCarousel" class="carousel slide">
<div class="carousel-inner">
<?php $i=0; foreach($this->partner_images as $sr){?>
<?php if($i==0){ ?><div class="item active"><?php } ?>
<?php if($i % 2 == 0){ ?><div class="item"><?php }?>
<div class="col-xs-3">
<a href="<?php echo $sr['url']; ?>">
<img src="<?php echo BASE_URL?>/partner-images/<?php echo $sr['name']?>" />
</a>
</div>
<?php if($i % 4 != 0){ ?></div><?php }?>
<?php $i++; } ?>
</div>
<a class="thumbleft" href="#thumbCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="thumbright" href="#thumbCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span> </a>
</div>
</div>

Shortcode is moving the_content outside of the article container in WordPress

I've made a shortcode function that returns some Advanced Custom Fields depending on which repeater field is chosen. It displays correctly and in the right order however any content typed underneath the shortcode is moved outside of its <article> container element.
Here is the code:
function boxes_shortcode($atts, $content = null) {
ob_start(); ?>
<div id="boxes">
<div class="box-gutter"></div>
<div class="box-sizer"></div>
<?php while( have_rows('box_repeater') ): the_row();
$image_id = get_sub_field('link_image');
$image_size = 'box-thumbnail';
$image_array = wp_get_attachment_image_src($image_id, $image_size);
$linkImage = $image_array[0]; ?>
<?php if(get_sub_field('box_type') == "box-link"): ?>
<div class="box">
<div class="link-box">
<img src="<?php echo $linkImage; ?>" alt="<?php echo $linkImage['alt']; ?>" />
<a class="caption-wrapper" href="http://www.google.com">
<span id="link-box-content" style="background:<?php the_sub_field('link_background_colour'); ?>">
<h6 style="color:<?php the_sub_field('link_title_colour'); ?>"><?php the_sub_field('link_title'); ?></h6>
<h4 style="color:<?php the_sub_field('link_text_colour'); ?>"><?php the_sub_field('link_text'); ?></h4>
<p style="color:<?php the_sub_field('link_text_colour'); ?>" href="<?php the_sub_field('link_url'); ?>"><?php the_sub_field('link_url_text'); ?> ></p>
</span>
</a>
</div>
</div>
<?php endif;
if(get_sub_field('box_type') == "box-quote"): ?>
<div class="box">
<div class="quote-box">
<div class="quotation-mark"></div>
<h4><?php the_sub_field('quote'); ?></h2>
<p><?php the_sub_field('quote_source'); ?></p>
<?php the_sub_field('quote_link_text'); ?> >
</div>
</div>
<?php endif;
if(get_sub_field('box_type') == "box-twitter"): ?>
<div class="box">
<div class="twitter">
<a class="twitter-timeline" href="<?php the_sub_field('twitter_url'); ?>" data-widget-id="<?php the_sub_field('twitter_widget_id'); ?>" data-chrome="noheader noscrollbar nofooter noborders transparent" data-tweet-limit="<?php the_sub_field('number_of_tweets'); ?>"></a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<a class="twitter-badge" href="<?php the_sub_field('twitter_url'); ?>"></a>
<div class="twitter-bottom">See more ></div>
</div>
</div>
<?php endif;
endwhile;?>
</div>
</div>
</div>
<?php
/* Get the buffered content into a var */
$sc = ob_get_contents();
ob_end_clean();
return $sc;
}
add_shortcode('boxes', 'boxes_shortcode');
Can anyone help solve this mystery? Many thanks.
You have two extra closing <div>'s in your code.
Try this:
function boxes_shortcode($atts, $content = null) {
ob_start(); ?>
<div id="boxes">
<div class="box-gutter"></div>
<div class="box-sizer"></div>
<?php while( have_rows('box_repeater') ): the_row();
$image_id = get_sub_field('link_image');
$image_size = 'box-thumbnail';
$image_array = wp_get_attachment_image_src($image_id, $image_size);
$linkImage = $image_array[0]; ?>
<?php if(get_sub_field('box_type') == "box-link"): ?>
<div class="box">
<div class="link-box">
<img src="<?php echo $linkImage; ?>" alt="<?php echo $linkImage['alt']; ?>" />
<a class="caption-wrapper" href="http://www.google.com">
<span id="link-box-content" style="background:<?php the_sub_field('link_background_colour'); ?>">
<h6 style="color:<?php the_sub_field('link_title_colour'); ?>"><?php the_sub_field('link_title'); ?></h6>
<h4 style="color:<?php the_sub_field('link_text_colour'); ?>"><?php the_sub_field('link_text'); ?></h4>
<p style="color:<?php the_sub_field('link_text_colour'); ?>" href="<?php the_sub_field('link_url'); ?>"><?php the_sub_field('link_url_text'); ?> ></p>
</span>
</a>
</div>
</div>
<?php endif;
if(get_sub_field('box_type') == "box-quote"): ?>
<div class="box">
<div class="quote-box">
<div class="quotation-mark"></div>
<h4><?php the_sub_field('quote'); ?></h2>
<p><?php the_sub_field('quote_source'); ?></p>
<?php the_sub_field('quote_link_text'); ?> >
</div>
</div>
<?php endif;
if(get_sub_field('box_type') == "box-twitter"): ?>
<div class="box">
<div class="twitter">
<a class="twitter-timeline" href="<?php the_sub_field('twitter_url'); ?>" data-widget-id="<?php the_sub_field('twitter_widget_id'); ?>" data-chrome="noheader noscrollbar nofooter noborders transparent" data-tweet-limit="<?php the_sub_field('number_of_tweets'); ?>"></a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<a class="twitter-badge" href="<?php the_sub_field('twitter_url'); ?>"></a>
<div class="twitter-bottom">See more ></div>
</div>
</div>
<?php endif;
endwhile;?>
</div>
<!--/div>
</div-->
<?php
/* Get the buffered content into a var */
$sc = ob_get_contents();
ob_end_clean();
return $sc;
}
add_shortcode('boxes', 'boxes_shortcode');

Categories