Create a twig template that shows the product entity view mode

1. +++ b/css/commerce_add_to_cart_confirmation.css
   @@ -0,0 +1,82 @@
   +.container{
   ...
   +.container_1{
   ...
   +.left_div{
   ...
   +.product_image{
   ...
   +.product_details{
   ...
   +.subm{
   

   Space between class and bracket is missing.

2. +++ b/css/commerce_add_to_cart_confirmation.css
   @@ -0,0 +1,82 @@
   +  border:8px solid #c9cccc;
   ...
   +  border:1px solid #edefef;
   ...
   +  border:2px solid #edefef;
   ...
   +  border:2px solid #edefef;
   ...
   +  background-color:#71deef ;
   ...
   +  background-color:#71deef ;
   

   Spacing of declarations and values is wrong.

3. +++ b/css/commerce_add_to_cart_confirmation.css
   @@ -0,0 +1,82 @@
   +hr{
   ...
   +h2 a{
   ...
   +table{
   

   Too general. This would affect all elements on the entire website, put a wrapper class on your popup and use that to specifically call elements within it.

4. +++ b/css/commerce_add_to_cart_confirmation.css
   @@ -0,0 +1,82 @@
   +.name{
   ...
   +.right_div{
   

   Class names need to be more descriptive. Instead of "name" maybe "product-name" ... instead of "right-div" go with what it contains "order-subtotal"

5. +++ b/css/commerce_add_to_cart_confirmation.css
   @@ -0,0 +1,82 @@
   +.button{
   

   .button is not great as a class name, but if you have shared characteristics between all buttons (like: border & display) then create a generic class "button" that sets up one of the buttons, and extend that class as needed. For example, you create a generic button <a href="#" class="button">Test</a> and it has rounded corners and 10px padding. Next, you need a blue button, you can create this: <a href="#" class="button button-blue">Test Blue</a> and define the blue button to have color: blue;. Using two classes like this works well and allows for inheritance to keep your CSS clean.

6. +++ b/src/CartPopUpProvider.php
   @@ -0,0 +1,92 @@
   +    $fid = $this->product->get('field_product_image')->getValue()[0]['target_id'];
   +    $fid ? $productImage = File::load($fid)->getFileUri() : '';
   +    $uuid = $this->product->get('field_product_image')->getSettings()['default_image']['uuid'];
   +    $uuid != NULL && $productImage == NULL ? $productImage = \Drupal::service('entity.manager')->loadEntityByUuid('file', $uuid)->getFileUri() : '';
   +    $product['title'] = $this->product->getTitle();
   +    $product['sku'] = $this->product->getSku();
   +    $product['price']['number'] = $this->product->getPrice()->getNumber();
   +    $product['price']['code'] = $this->product->getPrice()->getCurrencyCode();
   +    $product['image'] = $productImage;
   +    $product['quantity'] = $this->quantity;
   

   Nope. We just want to render the product using a display mode. Using the display mode, the user can choose which fields get displayed and use twig to further create their perfect layout. We just want to render the product. We need a new display mode called "Add to Cart Confirmation" for product variations.

7. +++ b/src/CartPopUpProvider.php
   @@ -0,0 +1,92 @@
   +    $order = [];
   +    foreach ($this->order->getItems() as $key => $item) {
   +      $order['totalItems'] += $item->getQuantity();
   +    }
   +    $order['id'] = $this->order->id();
   +    $order['totalTax'] = $order['totalItems'] * $taxAmount;
   +    $order['orderSubtotal'] = $this->order->getSubtotalPrice();
   +    $order['subtotal'] = $this->order->getTotalPrice();
   +    $order['cartUrl'] = Url::fromRoute('commerce_cart.page');
   +    $order['checkoutUrl'] = Url::fromRoute('commerce_checkout.form', ['commerce_order' => $order['id'], 'step' => 'order_information']);
   

   Too much formatting going on here. Remember, we want the designers to have as much control as possible. We can give them a product and an order. The rest of this can be determined using twig.

8. +++ b/src/CartPopUpProvider.php
   @@ -0,0 +1,92 @@
   +    // kint($order);exit;
   

   We want to remove the debug code before committing.

9. +++ b/templates/add-to-cart-message.html.twig
   @@ -0,0 +1,44 @@
   +  <span class="glyphicons glyphicons-remove" aria-hidden="true"></span>
   

   If you are depending on bootstrap then you should write that in the README.md. Hint: We don't want to depend on a specific kind of theme. This should work on any number of commerce installations, including those that use none bootstrap CSS.

10. +++ b/templates/add-to-cart-message.html.twig
    @@ -0,0 +1,44 @@
    +      <hr class="hr">
    

    Really? Use class names to call out what you're trying to do, using tag names as class names is incomprehensible and will fail to help you, long term. http://bdavidxyz.com/blog/how-to-name-css-classes/

11. +++ b/templates/add-to-cart-message.html.twig
    @@ -0,0 +1,44 @@
    +      <a href=""><div class="subm"><div class="button text-uppercase">Continue Shopping</div></div></a>
    +      <a href="{{ cart.checkoutUrl }}"><div class="button1 text-uppercase">Checkout Now</div></a>
    

    An <a> tag that is wrapping <div> tags??? Inline elements CANNOT and SHOULD NEVER wrap block elements. https://www.w3schools.com/html/html_blocks.asp

1. +++ b/css/commerce_add_to_cart_confirmation.css
   @@ -1,82 +1,91 @@
   +  background-color: #71deef ;
   

   Extra space here

2. +++ b/css/commerce_add_to_cart_confirmation.css
   @@ -1,82 +1,91 @@
   +  background-color: #71deef ;
   

   Extra space here

+++ b/templates/add-to-cart-message.html.twig
@@ -0,0 +1,43 @@
+      <a href=""><span class="continue-shopping text-uppercase subm">Continue Shopping</span></a>

The class names seem peculiar. Can't you just target the span class and set the text-transform property to uppercase? Also, what's 'subm'?

+++ b/templates/add-to-cart-message.html.twig
@@ -0,0 +1,43 @@
+      <div class="product-image"><img src="{{ file_url(product.field_product_image.entity.uri.value) }}" alt=""></div>

If I am understanding this correctly, I think what should be here is actually just a rendering of the product display mode instead of displaying each product item like the image, sku, total, etc. So, anyone can come in and override it.

I believe something like this is what is expected, except, that it should render the product entity:

$nid = 1;
$entity_type = 'node';
$view_mode = 'teaser';

$view_builder = \Drupal::entityTypeManager()->getViewBuilder($entity_type);
$storage = \Drupal::entityTypeManager()->getStorage($entity_type);
$node = $storage->load($nid);
$build = $view_builder->view($node, $view_mode);
$output = render($build);
?>