Home › Forums › WoodMart support forum › How to add 360 view button to other woodmart buttons on main page › Reply To: How to add 360 view button to other woodmart buttons on main page
elokrf
if someone encounters a problem like mine (add a button 360 on the main page to the woodmart-buttons group), you need:
1. Add an individual button to “woodmart-child/woocomerce/(you-template-product_hover)”
2. Add the following code to ”
function “individual button.php”() {
$images = woodmart_get_360_gallery_attachment_ids();
if( empty( $images ) ) return;
global $post;
$id = rand(100,999);
$title = ”;
$frames_count = count( $images );
$images_js_string = ”;
?>
<div class=”product-360-button”>
ID)?>”><span><?php esc_html_e(‘360 product view’, ‘woodmart’); ?></span>
</div>
<div id=”product-360-view-<?php echo($post->ID)?>” class=”product-360-view-wrapper mfp-hide”>
<div class=”woodmart-threed-view threed-id-<?php echo esc_attr( $id ); ?>”>
<?php if ( ! empty( $title ) ): ?>
<h3 class=”threed-title”><span><?php echo ($title); ?></span></h3>
<?php endif ?>
<ul class=”threed-view-images”>
<?php if ( count($images) > 0 ): ?>
<?php $i=0; foreach ($images as $img_id): $i++; ?>
<?php
$img = wp_get_attachment_image_src( $img_id, ‘full’ );
$width = $img[1];
$height = $img[2];
$images_js_string .= “‘” . $img[0] . “‘”;
if( $i < $frames_count ) {
$images_js_string .= “,”;
}
?>
<?php endforeach ?>
<?php endif ?>
<div class=”spinner”>
<span>0%</span>
</div>
</div>
</div>
<?php
woodmart_enqueue_script( ‘woodmart-threesixty’ );
wp_add_inline_script(‘woodmart-theme’, ‘jQuery(document).ready(function( $ ) {
$(“.threed-id-‘ . esc_js( $id ) . ‘”).ThreeSixty({
totalFrames: ‘ . esc_js( $frames_count ) . ‘,
endFrame: ‘ . esc_js( $frames_count ) . ‘,
currentFrame: 1,
imgList: “.threed-view-images”,
progress: “.spinner”,
imgArray: ‘ . “[“.$images_js_string.”]” . ‘,
height: ‘ . esc_js( $height ) . ‘,
width: ‘ . esc_js( $width ) . ‘,
responsive: true,
navigation: true
});
});’, ‘after’);
}”
Thx WOODMART STAFF!!!