FunAndProg

Hi , I'm BECUWE Adrien

Freelance in web development, Web Design , Ui,..
Check out also my photography FunAndBike.fr

Improvement the shortcode products of big cartel plugin

Posted on 02 Nov 2012 in Blog | 0 comments

For my last projects , I change the shortcode of plugin big cartel (http://wordpress.org/extend/plugins/big-cartel-plugin/).
I add the view of the second picture product in the survol effect.
This change is here : http://o-pignon.com/products/
The new PHP code of the shortcode :

function bc_products_shortcode($atts){
		extract( shortcode_atts( array(
				'size' => 'large',
				'target' => '_self',
				'css_class' => '',
				'products_count' => '10',
				'show_title' => 'no',
				'show_price' => 'no'
				) , $atts ) );		

		$store_url = $this->get_store_url($this->subdomain);
		$products = $this->load_products($this->subdomain);
		$i=0;
		$links = '<div class="bc-plugin-products">';
		do{
			$image = $item->images[0]->url;
			$links .= '<div class=" bc-plugin-product  '. $css_class .'">
			<a class="product_'.$i.' img_product" href="' . $store_url . '/product/' . $products[$i]->permalink . '" title="' . htmlspecialchars($products[$i]->name) . '" target="'. $target .'">
				<img class="big_cartel_product_img_1" src="' . $this->image_url($products[$i]->images[0]->url, $size) . '" height="300" width="300" />';
			
			if(!empty($products[$i]->images[1]->url))
			{
				$links .='<img class="big_cartel_product_img_2" src="' . $this->image_url($products[$i]->images[1]->url, $size) . '" height="300" width="300"/>';
			}
			if ($show_title == 'yes'){
				$links .= '<div class="bc-plugin-title">' . $products[$i]->name .'</div>';
			}							
			$links .= '</a>';
			if ($show_price == 'yes'){
				$links .= '<div class="bc-plugin-price">'. $this->format_currency($products[$i]->price, $this->subdomain) .'</div>';
			}
			$links .= '</div>
			<script>
  			jQuery(document).ready(function () {
  				jQuery(".product_'.$i.'").hover( function() {
  						jQuery(this).find("img.big_cartel_product_img_1").addClass("hover");
       					jQuery(this).find("img.big_cartel_product_img_2").addClass("notOver");
     				}, function() {
     					jQuery(this).find("img.big_cartel_product_img_1").removeClass("hover");
       					jQuery(this).find("img.big_cartel_product_img_2").removeClass("notOver");
     				}
   				);
			});
  			</script>
			';				
			$i++;
		} while ( $i < $products_count && count($products) > $i );		  
		$links .= '</div>';
		return $links;
		return '[BigCartel Products Error]';
	}	

The css style :
.bc-plugin-products{
	float:left;
	width:100%;
	padding-left:40px;
	margin-left:-5px;
	margin-bottom:50px;
	position: relative;
} 

.bc-plugin-products .bc-plugin-product{
	float:left;	
	position: relative;
	width: 300px;
	height: 300px;
}

.bc-plugin-products .bc-plugin-product a{
	display:block;
	width: 300px;
	height: 300px;
	float: left;
}

.img_product {
	position: relative;
	float: left;
	width: 300px;
	height: 300px;
}

img.big_cartel_product_img_2.notOver, img.big_cartel_product_img_2:hover{
	z-index: 99999;
	display: block;
}

img.big_cartel_product_img_2{
	z-index: 0;
	position: absolute;
	top:0;
	left: 0;
	width: 300px;
	height: 300px;
	display: none;
}


img.big_cartel_product_img_1{
	z-index: 9999999;
	position: absolute;
	top:0;
	left: 0;
	width: 300px;
	height: 300px;
	display: block;
}

img.big_cartel_product_img_1.hover, img.big_cartel_product_img_1:hover{
	z-index: 0;
	display: none;
}
Tags:

Contact

Thank you! I have received your message.

name

email

message

contact@funandprog.fr

18681356481

Chengdu, China