gistfile1.txt

<?php

/**
 * The template for displaying product content in the single-product.php template
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/content-single-product.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see     https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce/Templates
 * @version 3.6.0
 */

defined('ABSPATH') || exit;

global $product;

$obj_id = get_queried_object_id();
$current_url = get_permalink($obj_id);
$task = get_the_terms(get_the_ID(), 'task');
$taskName = '';
$taskSlug = '';
$taskPage = '';

if ($task) {
	/**
	 * Only get the first Task asssigned as there should only
	 * ever be one Task assigned to a how to guide.
	 *
	 * The reason why this if statement is here is because get_the_terms()
	 * can return false, so this is to prevent an error whereby I'd be trying
	 * to access [0] from a boolean.
	 */
	$task = $task[0];

	$taskName = $task->name;
	$taskSlug = $task->slug;
	$taskPage = get_field('product_page', $task);
}

$assets = get_template_directory_uri() . '/assets/images/';
$textColour = taskColour('text', $taskSlug);
$backgroundColour = taskColour('bg', $taskSlug);
$productGallery = wooCommerceProductImageGallery();
$howToGuides = get_field('how_to_guides');
$productSize = get_field('product_size');
$additionalSizeInfo = get_field('additional_size_information');
$productVariations = get_field('product_variations');
$externalLink = get_field('external_link');


/**
 * Hook: woocommerce_before_single_product.
 *
 * @hooked wc_print_notices - 10
 */
do_action('woocommerce_before_single_product');

if (post_password_required()) {
	echo get_the_password_form(); // WPCS: XSS ok.
	return;
}
?>

<?php get_template_part('template-parts/breadcrumbs'); ?>

<div class="container">
	<div class="row">
		<div class="col-12">

			<?php if (get_field('product_strapline')) : ?>
				<div class="row">
					<div class="col-12 text-right">
						<div class="d-inline-block text-center font-size-medium font-weight-normal py-1 product-strapline bg-<?php echo $taskSlug; ?>">
							<?php echo get_field('product_strapline'); ?>
						</div>
					</div>
				</div>
			<?php endif; ?>

			<div id="product-<?php the_ID(); ?>" <?php wc_product_class('', $product); ?>>

				<?php
				/**
				 * Hook: woocommerce_before_single_product_summary.
				 *
				 * @hooked woocommerce_show_product_sale_flash - 10
				 * @hooked woocommerce_show_product_images - 20
				 */
				// do_action( 'woocommerce_before_single_product_summary' );
				?>

				<div class="row">
					<div class="col-12 col-lg-3 order-2 order-lg-1">

						<div class="mt-3 mt-lg-0 product-category">
							PRODUCT FROM
							<div class="d-flex align-content-center task">
								<img src="<?php echo $assets . 'teardrops/teardrop-' . $taskSlug . '.png'; ?>" alt="" class="d-inline-block">
								<h3 class="d-flex align-items-center font-weight-bold text-uppercase h5 <?php echo $textColour; ?>">
									<?php if ($taskPage) : ?>
										<a href="<?php echo $taskPage; ?>">
										<?php endif; ?>

										<?php echo $taskName; ?>

										<?php if ($taskPage) : ?>
										</a>
									<?php endif; ?>
								</h3>
							</div>
						</div>

						<div class="row">
							<div class="col-12">
								<?php get_template_part('template-parts/post-actions'); ?>

								<?php if ($externalLink) : ?>
									<div>
										<a href="<?php echo esc_url($externalLink); ?>" target="_blank" onclick="track_amazon(event);">
											<img src="<?php echo get_template_directory_uri() . '/assets/images/btn-amazon.png'; ?>" alt="" style="width:200px;padding-top:20px;" />
										</a>
									</div>

									<script>
										function track_amazon(e) {
											return gtag_report_conversion('<?php echo $current_url; ?>');
										}
									</script>

								<?php endif; ?>
							</div>
						</div>

						<div class="row mt-5">

							<?php if (!empty($productGallery)) : ?>

								<div class="col-12">
									<h5 class="mb-2">Gallery</h5>
								</div>

								<?php foreach ($productGallery as $key => $imageSet) : ?>

									<div class="col-6 col-md-4">
										<a href="<?php echo $imageSet[1]; ?>" class="product-thumbnail theme-<?php echo $taskSlug; ?> aspect ratio1-1 <?php echo $key == 0 ? 'active' : ''; ?>" style="background-image: url(<?php echo $imageSet[0]; ?>);"></a>
									</div>

								<?php endforeach; ?>

							<?php endif; ?>

							<?php if ($howToGuides) : ?>

								<div class="col-12">
									<h5 class="mb-2 mt-3">How to videos</h5>
								</div>

								<?php foreach ($howToGuides as $id) : ?>

									<?php
									$video = get_field('video', $id);
									$link = get_the_permalink($id);

									if (get_field('video_preview_image', $id)) {
										$videoThumbnail = get_field('video_preview_image', $id)['sizes']['thumbnail'];
										$videoPoster = get_field('video_preview_image', $id)['url'];
									} else {
										$videoThumbnail = get_the_post_thumbnail_url($id);
										$videoPoster = $videoThumbnail;
									}
									?>

									<div class="col-6 col-md-4">
										<a href="<?php echo $link; ?>" class="aspect ratio1-1" data-video="<?php echo $video; ?>" data-video-poster="<?php echo $videoPoster; ?>" style="background-image: url(<?php echo $videoThumbnail; ?>);" data-toggle="modal" data-target=".video-modal"></a>
									</div>

								<?php endforeach; ?>

							<?php endif; ?>

							<?php if (have_rows('product_variations') || $productSize) : ?>
								<div class="col-12">

									<h5 class="mb-2 mt-3">Available sizes</h5>

									<div class="d-flex flex-row justify-content-start align-items-center product-variations">

										<?php if ($productSize) : ?>
											<div class="d-flex flex-column teardrop-column">
												<a href="" class="d-flex justify-content-center align-items-center font-size-extrasmall text-center teardrop text-<?php echo $task->slug; ?> border-<?php echo $task->slug; ?>">
													<?php echo $productSize; ?>
												</a>

												<?php if ($additionalSizeInfo) : ?>

													<a href="" class="d-flex justify-content-center align-items-center ml-0 font-size-extrasmall text-center teardrop text-<?php echo $task->slug; ?> border-<?php echo $task->slug; ?>">
														<?php echo $additionalSizeInfo; ?>
													</a>

												<?php endif; ?>

											</div>
										<?php endif; ?>

										<?php if (have_rows('product_variations')) : ?>
											<?php
											/**
											 * $iterations is set to 1 to account for the current
											 * product's .teardrop-column.
											 */
											$iterations = 1;
											$firstThreeWereOutput = false;
											?>

											<?php while (have_rows('product_variations')) : the_row(); ?>
												<?php
												$iterations++;
												$variantId = wc_get_product_id_by_sku(get_sub_field('sku'));
												$variant = wc_get_product($variantId);
												$variantSize = get_field('product_size', $variantId);
												$variantAdditionalSizeInfo = get_field('additional_size_information', $variantId);
												$link = get_the_permalink($variantId);
												?>


												<?php if ($variantSize) : ?>
													<div class="d-flex flex-column teardrop-column">
														<a href="<?php echo $link; ?>" class="d-flex justify-content-center align-items-center font-size-extrasmall text-center teardrop text-<?php echo $task->slug; ?> border-<?php echo $task->slug; ?>">
															<?php echo $variantSize; ?>
														</a>

														<?php if ($variantAdditionalSizeInfo) : ?>

															<a href="<?php echo $link; ?>" class="d-flex justify-content-center align-items-center font-size-extrasmall text-center teardrop text-<?php echo $task->slug; ?> border-<?php echo $task->slug; ?>">
																<?php echo $variantAdditionalSizeInfo; ?>
															</a>

														<?php endif; ?>

													</div>
												<?php endif; ?>

												<?php if (($iterations - 1) == count(get_field('product_variations'))) : ?>
									</div><!-- .product-variations -->
								<?php elseif ($iterations % 4 == 0) : ?>
								</div><!-- .product-variations -->
								<div class="d-flex flex-row justify-content-start align-items-center product-variations">
								<?php endif; ?>

							<?php endwhile; ?>
						<?php endif; ?>

						<?php /*
                                For reference:

                                The below closing div tag is only displayed if the current product has variations
                                otherwise the opening and closing of .product-variations is handled in the while loop above.
                                Since the 1st conditional in the above while loop closes the initial .product-variations
                                element if the iteration of that while loop is the last one, we don't need the below closing
                                div tag to appear in any other scenario.

                                */ ?>

						<?php if (!have_rows('product_variations')) : ?>
								</div>
							<?php endif; ?>
						</div>
					<?php endif; ?>

					<div class="col-12">

						<h5 class="mb-2 mt-3">Product Codes:</h5>

						<div class="product-codes">
							<ul>
								<li>
									<?php echo $product->get_sku(); ?>
									<?php if ($productSize) : ?>
										<?php echo '- ' . $productSize; ?>
									<?php endif; ?>
								</li>

								<?php if (have_rows('product_variations')) : ?>
									<?php while (have_rows('product_variations')) : the_row(); ?>
										<?php
										$variantId = wc_get_product_id_by_sku(get_sub_field('sku'));
										$variant = wc_get_product($variantId);
										$variantSku = $variant ? $variant->get_sku() : '';
										$variantSize = get_field('product_size', $variantId);
										$variantAdditionalSizeInfo = get_field('additional_size_information', $variantId);
										?>

										<li>
											<?php echo $variantSku; ?>
											<?php if ($variantSize) : ?>
												- <?php echo $variantSize;
													echo $variantAdditionalSizeInfo ? ' / ' . $variantAdditionalSizeInfo : ''; ?>
											<?php endif; ?>
										</li>

									<?php endwhile; ?>
								<?php endif; ?>

							</ul>
						</div>
					</div>

					<div class="col-12">
						<?php get_template_part('template-parts/share-buttons'); ?>
					</div>

					</div>

				</div>
				<div class="col-12 col-lg-9 order-1 order-lg-2">

					<?php
					/**
					 * Hook: woocommerce_single_product_summary.
					 *
					 * @hooked woocommerce_template_single_title - 5
					 * @hooked woocommerce_template_single_rating - 10
					 * @hooked woocommerce_template_single_price - 10
					 * @hooked woocommerce_template_single_excerpt - 20
					 * @hooked woocommerce_template_single_add_to_cart - 30
					 * @hooked woocommerce_template_single_meta - 40
					 * @hooked woocommerce_template_single_sharing - 50
					 * @hooked WC_Structured_Data::generate_product_data() - 60
					 */
					// do_action( 'woocommerce_single_product_summary' );
					?>

					<div class="product-heading <?php echo $textColour; ?>">
						<?php woocommerce_template_single_title(); ?>
					</div>

					<?php wc_get_template('single-product/tabs/description.php'); ?>

					<?php if (!empty($productGallery)) : ?>
						<div class="product-image-preview-wrapper">
							<div class="aspect ratio217-150 product-image-preview" style="background-image: url(<?php echo $productGallery[0][1]; ?>);"></div>
						</div>

					<?php endif; ?>

				</div>
			</div>

			<div class="row mt-5">
				<div class="col-12 col-md-4">
					<h4 class="h6 font-weight-bold <?php echo $textColour; ?>">
						KEY BENEFITS
					</h4>
					<hr>

					<?php if (have_rows('column_1')) : ?>
						<?php while (have_rows('column_1')) : the_row(); ?>

							<?php if (have_rows('benefits')) : ?>

								<ul>

									<?php while (have_rows('benefits')) : the_row(); ?>
										<li><?php the_sub_field('benefit'); ?></li>
									<?php endwhile; ?>

								</ul>

							<?php endif; ?>


							<?php if (have_rows('kit_contains')) : ?>
								<p>
									<strong>Kit Contains</strong>
								</p>
								<ul>

									<?php while (have_rows('kit_contains')) : the_row(); ?>
										<li><?php the_sub_field('item'); ?></li>
									<?php endwhile; ?>

								</ul>

							<?php endif; ?>

						<?php endwhile; ?>
					<?php endif; ?>
				</div>

				<div class="col-12 col-md-4">
					<h4 class="h6 font-weight-bold <?php echo $textColour; ?>">
						SUGGESTED USE
					</h4>
					<hr>
					<?php echo apply_filters('the_content', get_field('column_2')['content']); ?>
				</div>
				<div class="col-12 col-md-4">
					<h4 class="h6 font-weight-bold <?php echo $textColour; ?>">
						AFTER CARE
					</h4>
					<hr>
					<?php echo apply_filters('the_content', get_field('column_3')['content']); ?>
				</div>
			</div>

			<hr style="margin-top:80px"/>

			<div class="container">
			  <div class="row heading-row">
			  <div class="col-12 text-center">
			  <h2>Why choose Harris?</h2>
			  </div>
			  </div>
			  <div class="row">
			  <div class="col-12 col-md-6 col-lg-3 text-center"><img class="usp-icon" src="https://harrisbrushes.com/wp-content/uploads/2024/10/icon-1.png" />
			  <h5 class="mt-3 mb-3">Heritage You Can Trust</h5>
			  With 90+ years of expertise, Harris is a trusted name in decorating tools. Our history is built on quality and innovation, ensuring you get the job done right every time.

			  </div>
			  <div class="col-12 col-md-6 col-lg-3 text-center"><img class="usp-icon" src="https://harrisbrushes.com/wp-content/uploads/2024/10/icon-2.png" />
			  <h5 class="mt-3 mb-3">Manufacturing Innovation</h5>
			  We embrace cutting-edge technology to create tools that make decorating faster and easier for everyone, from DIYers to professionals.

			  </div>
			  <div class="col-12 col-md-6 col-lg-3 text-center"><img class="usp-icon" src="https://harrisbrushes.com/wp-content/uploads/2024/10/icon-3.png" />
			  <h5 class="mt-3 mb-3">Accessible &amp; Affordable</h5>
			  We offer high-quality products at reasonable prices, with options for every budget, making great results accessible to all across the UK.

			  </div>
			  <div class="col-12 col-md-6 col-lg-3 text-center"><img class="usp-icon" src="https://harrisbrushes.com/wp-content/uploads/2024/10/icon-4.png" />
			  <h5 class="mt-3 mb-3">Our No-Loss Guarantee</h5>
			  Our patented No-Loss paint brushes are designed to keep bristles intact, ensuring a flawless finish every time, unlike any other brush on the market.

			  </div>
			  </div>
			</div>

			<?php
			/**
			 * Hook: woocommerce_after_single_product_summary.
			 *
			 * @hooked woocommerce_output_product_data_tabs - 10
			 * @hooked woocommerce_upsell_display - 15
			 * @hooked woocommerce_output_related_products - 20
			 */
			// do_action( 'woocommerce_after_single_product_summary' );
			?>
		</div>
	</div>
</div>
</div>

<?php get_template_part('template-parts/flexible-content'); ?>

<?php do_action('woocommerce_after_single_product'); ?>


<div class="modal fade video-modal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-body">
				<div class="video-wrapper aspect ratio16-9">
					<video height="100%" width="100%" poster="" class="aspect-content" src="" controls></video>
				</div>
			</div>

			<div class="modal-footer">
				<a href="" class="button bg-grey-dark-v2">View the guide</a>
			</div>
		</div>
	</div>
</div>